
<template>
  <div>
    <v-header></v-header>
	  <div class="ris_p_menu_cont">
	    <div class="ris_cont ris_cont1">
	        <!--<div class="ris_cont_headNav">系统设置&gt;权限管理&gt;按钮权限设置</div>-->
	        <div class="ris_cont_headHint">科室权限设置
            <router-link :to="{ name: 'RoleSetting', params: {  }}" ><span class="ris_cont_headHint_btn">返回</span></router-link>
          </div>
	        <!--内容-->
	        <div class="ris_p_cont clear">
	            <!--左边-->
	            <div class="ris_p_cont_left">
	                <p class="ris_p_cont_left_head">科室名称</p>
	                <ul class="ris_btn_cont_left_ul">
	                    <li v-for="item in selectedDept">
	                        <a class="ris_btn_cont_left_ul_a" @dblclick="deleteDept(item.code)">{{item.name}}</a>
	                    </li>
	                    <!--<li>-->
	                        <!--<a href="#" class="ris_btn_cont_left_ul_a" code="3">一级菜单3</a>-->
	                        <!--<ul>-->
	                            <!--<li><a href="#" class="ris_btn_cont_left_ul_a" code="5">二级菜单1</a></li>-->
	                            <!--<li><a href="#" class="ris_btn_cont_left_ul_a" code="6">二级菜单2</a></li>-->
	                            <!--<li><a href="#" class="ris_btn_cont_left_ul_a" code="7">二级菜单3</a></li>-->
	                            <!--<li><a href="#" class="ris_btn_cont_left_ul_a" code="8">二级菜单4</a></li>-->
	                        <!--</ul>-->
	                    <!--</li>-->
	                    <!--<li>-->
	                        <!--<a href="#" class="ris_btn_cont_left_ul_a" code="7">一级菜单7</a>-->
	                        <!--<ul>-->
	                            <!--<li><a href="#" class="ris_btn_cont_left_ul_a" code="11">二级菜单1</a></li>-->
	                            <!--<li><a href="#" class="ris_btn_cont_left_ul_a" code="12">二级菜单2</a></li>-->
	                            <!--<li><a href="#" class="ris_btn_cont_left_ul_a" code="143">二级菜单3</a></li>-->
	                            <!--<li><a href="#" class="ris_btn_cont_left_ul_a" code="1433">二级菜单4</a></li>-->
	                        <!--</ul>-->
	                    <!--</li>-->
	                </ul>
	            </div>
	            <!--中间-->
	            <div class="ris_p_cont_center">
	                <button class="ris_btn_cont_center_right button">&gt;</button>
	                <button class="ris_btn_cont_center_left button">&lt;</button>
	            </div>
	            <!--右边-->
	            <div class="ris_p_cont_right">
	                <p class="ris_p_cont_right_head">可选科室名称</p>
	                <ul class="ris_btn_cont_right_ul">
	                    <li v-for="item in notSelectedDept">
	                        <a class="ris_btn_cont_right_ul_a" @dblclick="addDept(item.code)">{{item.name}}</a>
	                    </li>
	                </ul>
	            </div>
	        </div>
	    </div>
	</div>
  </div>
</template>




<script>
  import Header from '@/components/Header/Header';
  import {getSelectedDept, getNotSelectedDept, addActorDept, deleteActorDept} from '@/api/settings';

	export default {
	    name: 'hello',
      components: {
        'v-header': Header
      },
      data () {
        return {
          id: '',
          selectedDept: '',
          notSelectedDept: '',
        }
      },
	    created(){
        this.id = this.$route.query.id

        return new Promise((resolve, reject) => {
          //获取已选列表
          getSelectedDept(this.id).then(response => {
            this.selectedDept = response.data;
            resolve()
          }).catch(error => {
            reject(error)
          });
          //获取未选列表
          getNotSelectedDept(this.id).then(response => {
            this.notSelectedDept = response.data;
            resolve()
          }).catch(error => {
            reject(error)
          });

        })
	    },
	    mounted(){

	    },
	    methods:{
        deleteDept(code) {
          deleteActorDept(this.id, code).then(response => {
            this.refreshDept()
          })
        },
        addDept(code) {
          addActorDept(this.id, code).then(response => {
            this.refreshDept()
          })
        },
        refreshDept() {
          //获取已选列表
          getSelectedDept(this.id).then(response => {
            this.selectedDept = response.data;
          })
          //获取未选列表
          getNotSelectedDept(this.id).then(response => {
            this.notSelectedDept = response.data;
          })
        }

	    },
//	    beforeUpdate() {
//		    this.$nextTick(function(){
//
//		    })
//		},

  }

</script>

<style scoped>
	.ris_cont_headHint{
    height: 40px;
    background-color: #999;
    color: #f1f1f1;
    line-height: 40px;
    padding-left: 30px;
    box-sizing: border-box;
}

	 .ris_cont1{
            background: #fff;
        }
        .ris_p_button{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            display: none;
        }
        .ris_p_cont{
            /*width: 80%;*/
            margin: 15px auto;
        }
        /*左边*/
        .ris_p_cont_left{
            float: left;
            width: 40%;
        }
        .ris_p_cont_left_head{
            line-height: 44px;
            background-color: #a0a0a0;
            padding-left: 30px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
        }
        /*列表样式*/
        .ris_btn_cont_left_ul{
            line-height: 32px;
            width: 100%;
            height: 583px;
            overflow-x: hidden;
            border: 1px solid #2578ad;
            border-top: 0;
            overflow-y: auto;
            background-color: #fff;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .ris_btn_cont_left_ul li{
            cursor: pointer;
            width: 100%;
        }
        .ris_btn_cont_left_ul li a{
            display: block;
            width: 100%;
            height: 100%;
            /*border-bottom: 1px solid #fff;*/
            opacity: 0.9;
        }
        .ris_btn_cont_left_ul li a:hover{
            opacity: 1.5;
        }
        .ris_btn_cont_left_ul>li>a{
            padding-left: 30px;
            background-color: #215c84;
            border-bottom: 1px solid #fff;
            color: #fff;
            /*border-top: 1px solid #aaa;*/
        }
        .ris_btn_cont_left_ul>li>ul>li>a{
            padding-left: 60px;
            background-color: #fff;
            border-bottom: 1px solid #ccc;
            color: #666;
        }
        .ris_btn_cont_left_ul>li>ul{
            /*display: none;*/
        }
        .ris_btn_cont_left_ul>li>ul>li>ul{
            /*display: none;*/
        }
        /*a.ris_tm_cont_left_ul_active{*/
        /*color: #ffb53e !important;*/
        /*}*/
        /*中间*/
        .ris_p_cont_center{
            float: left;
            width: 20%;
            text-align: center;
        }
        .ris_p_cont_center button{
            margin-top: 150px;
            width: 70%;
            height: 40px;
            border: 0;
            border-radius: 18px;
            color: #fff;
            cursor: pointer;
            font-size: 26px;
            line-height: 40px;
            background: #32a2e2;
        }
        .ris_p_cont_center button:hover{
            background: #4f94cd;
        }


        /*右边*/
        .ris_p_cont_right{
            float: right;
            width: 40%;
        }
        .ris_p_cont_right_head{
            line-height: 44px;
            background-color: #a0a0a0;
            padding-left: 30px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
        }
        .ris_btn_cont_right_ul{
            line-height: 32px;
            width: 100%;
            height: 583px;
            overflow-x: hidden;
            border: 1px solid #2578ad;
            border-top: 0;
            overflow-y: auto;
            background-color: #fff;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .ris_btn_cont_right_ul li{
            cursor: pointer;
            width: 100%;
        }
        .ris_btn_cont_right_ul li a{
            display: block;
            width: 100%;
            height: 100%;
            /*border-bottom: 1px solid #fff;*/
            opacity: 0.9;
        }
        .ris_btn_cont_right_ul li a:hover{
            opacity: 1.5;
        }
        .ris_btn_cont_right_ul>li>a{
            padding-left: 30px;
            background-color: #215c84;
            border-bottom: 1px solid #fff;
            color: #fff;
            /*border-top: 1px solid #aaa;*/
        }
        .ris_btn_cont_right_ul>li>ul>li>a{
            padding-left: 60px;
            background-color: #fff;
            border-bottom: 1px solid #ccc;
            color: #666;
        }
        .ris_btn_cont_right_ul>li>ul{
            /*display: none;*/
        }
        .ris_btn_cont_right_ul>li>ul>li>ul{
            /*display: none;*/
        }
        .ris_btn_cont_left_ul_a_active{
            color: #fa0002 !important;
        }
        .ris_btn_cont_right_ul_a_active{
            color: #fa0002 !important;
        }
        .ris_cont_headHint_btn{
            display: inline-block;
            float: right;
            padding: 0 30px;
            cursor: pointer;
            font-size: 14px;
            color: #ffac0e;
        }
        .ris_cont_headHint_btn:hover{
            color: #ff0;
        }

</style>
